<template>
  <div>
    <div v-if="!data" slot="empty" class="emptyBg">
      <el-empty :image-size="200"></el-empty>
    </div>
    <MyEcharts v-else :option="option" @emitIdx="change" />
  </div>
</template>
<script>
import Bus from "@/utils/bus.js";
export default {
  components: {
    MyEcharts: () => import("@/components/myEcharts/index.vue"),
  },
  data() {
    return {
      option: null,
      firstData: [],
      option: null,
    };
  },
  props: ["data"],
  watch: {
    data() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (!this.data) return;
      let arr = [];
      this.firstData = this.uniqueById(this.data.map((v) => v.level1));
      this.firstData.forEach((v) => {
        let n = 0;
        this.data.forEach((m) => {
          if (v.id == m.level1.id) {
            n += parseInt(m.num);
          }
        });
        arr.push(n);
      });
      this.initEcharts(this.firstData, arr);
    },
    initEcharts(data, arr) {
      // 饼图
      data.forEach((v, i) => {
        this.$set(v, "value", arr[i]);
      });
      this.option = {
        tooltip: {},
        legend: {
          orient: "vertical",
          right: "10%",
          top: "30%",
        },
        title: {
          text: "思政体系",
          top: "0%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)", // b代表名称，c代表对应值，d代表百分比
            },
            radius: "50%", //饼图半径
            data: data,
          },
        ],
        animationDuration: 1000,
      };
    },
    change(idx) {
      Bus.$emit("changeIdx", idx);
    },
  },
};
</script>
<style scoped lang="scss">
</style>